<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>发布项目第二步</title>
  <meta name="keywords" content=" " />
  <meta name="description" content="" />
  <link rel="stylesheet" href="https://zc.alltesting.cn/css/reset.css">
  <link rel="stylesheet" href="./css/common-style.css">
  <link rel="stylesheet" href="./css/publish.css">
  <!-- 1. 引入vue，需要引用在 ElementUI 之前-->
  <script src="./js/vue.js"></script>
  <!-- 2. 导入css -->
  <link href="./element-ui@2.15.8/lib/theme-chalk/index.css" rel="stylesheet">
  <!-- 3. 引入ElementUI组件 -->
  <script src="./element-ui@2.15.8/lib/index.js"></script>
  <script src="https://unpkg.com/http-vue-loader"></script>
</head>

<body>
  <!-- header 占位符 -->
  <div style="height: 70px;width:100%">
    <header style="position: fixed;top:0;left:0;right:0;background-color:#212832;height: 70px;z-index: 100;"></header>
  </div>
  <div id="publish02">
    <!-- 工具栏 -->
    <div class="publish-top-bar-placeholder"></div>
    <div class="publish-top-bar">
      <div class="publish-container">
        <div class="publish-top-bar-content">
          <h3>发布项目</h3>
          <el-steps :active="1" align-center class="steps steps-last" finish-status="success">
            <el-step></el-step>
            <el-step></el-step>
          </el-steps>
        </div>
      </div>
    </div>
    <div class="project-main">
      <div class="project-content">
        <el-form :model="ruleForm2" :rules="rules" ref="ruleForm2" label-position="top" label-width="100px"
          class="project-data">
          <el-form-item label="预付金额：" required>
            <el-row>
              <el-form-item prop="price" class="price">
                <el-input v-model.number="ruleForm2.price" placeholder="请输入您的预付金额" suffix-icon="el-icon-rmb"
                  oninput="value=value.replace(/\D|^0/g,'')">
                </el-input>
                <span>当前账户可用余额：<span style="color: red;">100</span></span>
              </el-form-item>
              <el-form-item style="color: #EB6F00;">预付金额是向项目中充值，项目结束后，多余的钱会返还到账户中</el-form-item>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="计划结束时间：" required>
            <el-form-item prop="date">
              <el-date-picker v-model="ruleForm2.date" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            </el-date-picker>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item>
            <span slot="label">测试人员：<span style="color: #999">（每个项目限邀请10人）</span></span>
            <el-row>
              <el-form-item>
                <el-button type="primary" plain @click="isShowDialog = true">在线邀请测试人员</el-button>
              </el-form-item>
              <el-form-item style="color: #EB6F00;">众测可以在线邀请测试人员啦，还可以根据您的要求定制筛选，快去选择您需要的测试人员吧</el-form-item>
            </el-row>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="软件地址：" required>
            <el-row>
              <el-form-item prop="downloadWay">
                <el-radio-group v-model="ruleForm2.downloadWay" class="download-way">
                  <el-radio :label="index" border v-for="(item,index) in downloadWay"
                    :class="[index===ruleForm2.downloadWay?'current':'']" :key="index">{{item}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row v-if="ruleForm2.downloadWay===0">
              <el-form-item prop="uploadFile" key="001" ref="uploadFile">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                  :before-upload="beforeUpload" :on-exceed="handleExceed" :file-list="ruleForm2.fileList">
                  <el-button type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">请上传项目文件，不得大于20M</div>
                </el-upload>
              </el-form-item>
            </el-row>
            <el-row class="bug-price-list" v-if="ruleForm2.downloadWay===1">
              <el-form-item label="下载地址：" class="bug-price-item download-way-item" prop="downloadUrl1" key="002">
                <el-input v-model="ruleForm2.downloadUrl1" placeholder="请提供网站网址链接或者系统安装包下载链接"></el-input>
              </el-form-item>
            </el-row>
            <el-row class="bug-price-list" v-if="ruleForm2.downloadWay===2">
              <el-form-item label="网盘链接：" class="bug-price-item download-way-item" prop="downloadUrl1" key="003">
                <el-input v-model="ruleForm2.downloadUrl2" placeholder="请提供系统安装包网盘下载链接"></el-input>
              </el-form-item>
              <el-form-item label="网盘秘钥：" class="bug-price-item download-way-item">
                <el-input v-model="ruleForm2.requirementDesc" placeholder="请提供对应网盘密钥，如没有可不填"></el-input>
              </el-form-item>
            </el-row>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="项目封面：" required>
            <el-form-item prop="posterList">
              <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                accept=".jpg,.jpeg,.png,.jif" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                :on-success="handleSuccess" :class="{hide_box: uploadBtn}">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="ruleForm2.dialogVisible">
                <img width="100%" :src="ruleForm2.dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>

          </el-form-item>
          <el-form-item class="bottom-bar">
            <el-button>返回上一步</el-button>
            <el-button type="primary" @click="submitForm('ruleForm2')">&emsp;发布&emsp;</el-button>
            <el-button>保存至草稿</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 测试者弹窗组件 -->
    <tester-list :dialogformvisible="isShowDialog" @closedialog="closeInviteDialog"></tester-list>


  </div>


</body>
<script>
  var app = new Vue({
    el: '#publish02',
    components: {
      'tester-list': httpVueLoader('./components/testerList.vue')
    },
    data() {
      // 上传项目文件的验证规则
      let validateFileUrl = (rule, value, callback) => {
        if (this.ruleForm2.fileList.length < 1) {
          callback(new Error("请上传文件"))
        }
      }

      // 下载地址 URL 校验规则 
      let validateDownloadUrl = (rule, value, callback) => {
        const reg = /^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-\(\)]*[\w@?^=%&/~+#-\(\)])?$/;
        if (value === '' || value === undefined || value == null) {
          callback(new Error('请输入合法的链接地址'));
        } else {
          if ((!reg.test(value)) && value !== '') {
            callback(new Error('请输入合法的链接地址'));
          } else {
            callback();
          }
        }
      }

      // 图片上传校验规则
      let validateImage = (rule, value, callback) => { //验证器
        if (!this.uploadBtn) {     //为true代表图片在  false报错
          callback(new Error('请上传图片'));
        } else {
          callback();
        }
      };
      return {
        isShowDialog: false,
        uploadBtn: false, // 是否隐藏上传图片按钮
        downloadWay: ['本地上传', '链接下载', '网盘下载'], // 项目下载方式
        ruleForm2: {
          price: '', // 账户可用余额
          date: '', // 计划结束时间
          downloadWay: 0, // 默认选中 “本地上传”
          fileList: [], // 项目文件列表
          downloadUrl1: '', // 网站网址链接或者系统安装包下载链接
          downloadUrl2: '', // 系统安装包网盘下载链接
          downloadUrlPassWord: '', // 网盘密钥
          dialogImageUrl: '', // 项目封面的 URL 地址
          dialogVisible: false, // 默认隐藏上传文件的文件选择弹窗
          emailAndMobile: ''
        },
        rules: {
          price: [
            { required: true, message: '请输入预付金额', trigger: 'blur' },
          ],
          date: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          downloadWay: [
            { required: true, message: '请选择软件地址的上传方式', trigger: 'change' }
          ],
          uploadFile: [
            { required: true, validator: validateFileUrl, trigger: 'blur' }
          ],
          downloadUrl1: [
            { validator: validateDownloadUrl, trigger: 'blur' }
          ],
          posterList: [
            { required: true, validator: validateImage, trigger: 'change' }
          ]
        }

      }
    },
    methods: {
      // 项目发布提交
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      // 限制上传文件的类型（.doc/.docx）和大小
      // beforeUpload(file) {
      //   var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      //   let isLt = file.size / 1024 / 1024 < 20; // 判断文件是否小于 20MB

      //   // .doc,.docx
      //   const extension1 = testmsg === "doc";
      //   const extension2 = testmsg === "docx"

      //   // const isLt2M = file.size / 1024 / 1024 < 10
      //   if (!extension1 && !extension2) {
      //     this.$message({
      //       message: "请上传.doc、.docx 类型的文档!",
      //       type: "info",
      //       offset: 80,
      //     });
      //     return false;
      //   } else if (!isLt) {
      //     this.$message({
      //       message: "请上传小于2MB文档!",
      //       type: "info",
      //       offset: 80,
      //     });
      //     return false;
      //   } else {
      //     return true;
      //   }
      // },


      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      // 项目封面图片移除
      handleRemove(file, fileList) {
        console.log(file, fileList);
        this.uploadBtn = false;
      },

      // 项目封面图片放大预览
      handlePictureCardPreview(file) {
        this.ruleForm2.dialogImageUrl = file.url;
        this.ruleForm2.dialogVisible = true;
      },

      // 项目封面图片上传成功
      handleSuccess(response, file, fileList) {
        this.uploadBtn = true;  // 上传成功后，隐藏上传按钮
        this.$refs['ruleForm2'].clearValidate('posterList')  // 上传成功清除校验的文本提示
      },

      closeInviteDialog() {
        this.isShowDialog = false
      }

    }
  })
</script>

</html>